<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" content="数据详情" />
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>

      <el-row type="flex" :gutter="15" class="row-bg" justify="space-between">
        <el-col :span="12" class="page-container-content">
          <h2 style="font-size: 30px" data-v-b280ca9a="">
            {{ dataForm.name }}
          </h2>
          <div
            class="other-info"
            style="font-size: 15px; margin-top: 15px"
            data-v-b280ca9a=""
          >
            <span data-v-b280ca9a=""
              >章节数：{{ dataForm.courseChapterCount }}</span
            ><span data-v-b280ca9a="">时长： --</span>
          </div>
          <div style="font-size: 15px" class="conditions" data-v-b280ca9a="">
            <div class="title" data-v-b280ca9a="">课程完成条件:</div>
            <div class="label-box" data-v-b280ca9a="" style="margin-left: 30px">
              <el-checkbox class="checkbox" :checked="true" disabled
                >完成课程章节学习</el-checkbox
              >
              <el-checkbox
                class="checkbox"
                v-if="dataForm.homeworkId"
                :checked="true"
                disabled
                >课后作业</el-checkbox
              >
              <el-checkbox
                class="checkbox"
                v-if="dataForm.homeExam"
                :checked="true"
                disabled
                >课后考试</el-checkbox
              >
              <el-checkbox
                class="checkbox"
                style="width: 85px"
                v-if="dataForm.evaluation"
                :checked="true"
                disabled
              >
                星评
              </el-checkbox>
            </div>
          </div>
        </el-col>
        <el-col :span="12" class="page-container-extraContent">
          <div class="page-container-extra" data-v-b280ca9a="">
            <div class="item" data-v-b280ca9a="">
              <div class="ant-statistic" data-v-b280ca9a="">
                <div class="ant-statistic-title">完成/学习/可学人数</div>
                <div class="ant-statistic-content" style="text-align: center">
                  <!----><span class="ant-statistic-content-value"
                    ><span
                      class="ant-statistic-content-value-int"
                      style="color: #1890ff"
                      >{{ dataForm.userLearnedCount }}</span
                    ></span
                  ><span class="ant-statistic-content-suffix"
                    >/{{ dataForm.userLearningCount }}/{{
                      dataForm.userCount
                    }}</span
                  >
                </div>
              </div>
            </div>
            <div class="item" data-v-b280ca9a="">
              <div class="ant-statistic" data-v-b280ca9a="">
                <div class="ant-statistic-title">学习率</div>
                <div class="ant-statistic-content" style="text-align: center">
                  <!----><span class="ant-statistic-content-value"
                    ><span
                      class="ant-statistic-content-value-int"
                      style="color: #1890ff"
                      >{{
                        (
                          (dataForm.userLearningCount / dataForm.userCount) *
                          100
                        ).toFixed(2)
                      }}</span
                    ></span
                  ><span class="ant-statistic-content-suffix">%</span>
                </div>
              </div>
            </div>
            <div class="item" data-v-b280ca9a="">
              <div class="ant-statistic" data-v-b280ca9a="">
                <div class="ant-statistic-title">完成率</div>
                <div class="ant-statistic-content" style="text-align: center">
                  <!----><span class="ant-statistic-content-value"
                    ><span
                      class="ant-statistic-content-value-int"
                      style="color: #1890ff"
                      >{{
                        (
                          (dataForm.userLearnedCount / dataForm.userCount) *
                          100
                        ).toFixed(2)
                      }}</span
                    ></span
                  ><span class="ant-statistic-content-suffix">%</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-tabs
        v-model="activeName"
        @tab-click="handleTabClick"
        style="padding: 0 20px"
      >
        <el-tab-pane label="学习详情" name="first">
          <el-row :gutter="15" :style="{ margin: '0 auto', width: '100%' }">
            <el-col :span="24">
              <div style="padding-bottom: 10px">
                <el-input
                  v-model="query.name"
                  placeholder="请输入"
                  style="width: 200px; margin-right: 10px"
                  clearable
                ></el-input>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="search()"
                  >查询</el-button
                >
              </div>
            </el-col>
            <el-col :span="24">
              <jsbos-table
                v-loading="listLoading"
                :data="list"
                ref="jsbosTableRef"
                @sort-change="sortChange"
              >
                <el-table-column
                  prop="realName"
                  label="姓名"
                  width="100"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="account"
                  label="账户"
                  width="150"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="organizeName"
                  label="所属部门"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="positionName"
                  label="岗位"
                  width="200"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="learningLength"
                  label="学习时长"
                  width="150"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="process"
                  label="总进度"
                  width="100"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.process }}%
                  </template>
                </el-table-column>
                <el-table-column
                  prop="chapterProgress"
                  label="章节进度"
                  width="100"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.chapterProgress }}%
                  </template>
                </el-table-column>
                <el-table-column
                  prop="isCompletedHomework"
                  label="作业"
                  width="200"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.isCompletedHomework
                        | dynamicText(enabledMarkOptions)
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="考试"
                  width="100"
                  prop="isCompletedExam"
                  algin="center"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.isCompletedExam
                        | dynamicText(enabledMarkOptions)
                    }}
                  </template>
                </el-table-column>

                <el-table-column
                  label="评分"
                  width="100"
                  prop="isCompletedStar"
                  algin="center"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.isCompletedStar
                        | dynamicText(enabledMarkOptions)
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="creatorTime"
                  label="开始学习时间"
                  width="140"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="lastModifyTime"
                  label="最后学习时间"
                  width="140"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="lastModifyTime"
                  label="完成时间"
                  width="140"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  label="状态"
                  width="100"
                  prop="enabledMark"
                  algin="center"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.enabledMark | dynamicText(enabledMarkOptions)
                    }}
                  </template>
                </el-table-column>
              </jsbos-table>
              <!--              <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"-->
              <!--                          @pagination="initData"/>-->
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="课后作业" name="second" v-if="dataForm.homeworkId">
          <el-row :gutter="15" :style="{ margin: '0 auto', width: '100%' }">
            <el-col :span="24">
              <div style="padding-bottom: 10px">
                <el-input
                  v-model="query.name"
                  placeholder="请输入"
                  style="width: 200px; margin-right: 10px"
                  clearable
                ></el-input>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="search()"
                  >查询</el-button
                >
              </div>
            </el-col>
            <el-col :span="24">
              <jsbos-table
                v-loading="listLoading"
                :data="homeworkList"
                ref="jsbosTableRef"
                @sort-change="sortChange"
                style="height: 500px"
              >
                <el-table-column
                  prop="realName"
                  label="姓名"
                  width="100"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="account"
                  label="账户"
                  width="150"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="organizeName"
                  label="所属部门"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="positionName"
                  label="岗位"
                  width="200"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="myScore"
                  label="得分"
                  width="140"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="creatorTime"
                  label="提交时间"
                  width="140"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  label="状态"
                  width="100"
                  prop="enabledMark"
                  algin="center"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.enabledMark | dynamicText(enabledMarkOptions)
                    }}
                  </template>
                </el-table-column>
              </jsbos-table>
              <!--              <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"-->
              <!--                          @pagination="initData"/>-->
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="课后考试" name="third" v-if="dataForm.homeExam">
          <el-row :gutter="15" :style="{ margin: '0 auto', width: '100%' }">
            <el-col :span="24">
              <div style="padding-bottom: 10px">
                <el-input
                  v-model="query.name"
                  placeholder="请输入"
                  style="width: 200px; margin-right: 10px"
                  clearable
                ></el-input>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="search()"
                  >查询</el-button
                >
              </div>
            </el-col>
            <el-col :span="24">
              <jsbos-table
                v-loading="listLoading"
                :data="examList"
                ref="jsbosTableRef"
                @sort-change="sortChange"
                style="height: 500px"
              >
                <el-table-column
                  prop="realName"
                  label="姓名"
                  width="100"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="account"
                  label="账户"
                  width="150"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="organizeName"
                  label="所属部门"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="positionName"
                  label="岗位"
                  width="200"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="examTaskList"
                  label="所有考试成绩（按时间顺序）"
                  width="250"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="myScore"
                  label="及格分"
                  width="140"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="passLine"
                  label="得分"
                  width="140"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="creatorTime"
                  label="提交时间"
                  width="140"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  label="是否通过"
                  width="100"
                  prop="enabledMark"
                  algin="center"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.enabledMark | dynamicText(enabledMarkOptions)
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="startTime"
                  label="考试用时"
                  width="140"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="startTime"
                  label="允许考试次数"
                  width="140"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="startTime"
                  label="考试次数"
                  width="140"
                  align="center"
                >
                </el-table-column>
              </jsbos-table>
              <!--              <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"-->
              <!--                          @pagination="initData"/>-->
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="评估评分" name="fourth" v-if="dataForm.evaluation">
          <el-row :gutter="15" :style="{ margin: '0 auto', width: '100%' }">
            <el-col :span="24">
              <div style="padding-bottom: 10px">
                <el-input
                  v-model="query.name"
                  placeholder="请输入"
                  style="width: 200px; margin-right: 10px"
                  clearable
                ></el-input>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="search()"
                  >查询</el-button
                >
              </div>
            </el-col>
            <el-col :span="24">
              <jsbos-table
                v-loading="listLoading"
                :data="list"
                ref="jsbosTableRef"
                @sort-change="sortChange"
                style="height: 500px"
              >
                <el-table-column
                  prop="realName"
                  label="姓名"
                  width="100"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="account"
                  label="账户"
                  width="150"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="organizeName"
                  label="所属部门"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="positionName"
                  label="岗位"
                  width="200"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="myStar"
                  label="评分"
                  width="150"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="starTime"
                  label="完成时间"
                  width="140"
                  align="center"
                >
                </el-table-column>
              </jsbos-table>
              <!--              <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"-->
              <!--                          @pagination="initData"/>-->
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";

export default {
  components: {},
  props: [],
  name: "CourseData",
  data() {
    return {
      activeName: "first",
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: "",
      scopeJson: [],
      dataForm: {
        id: "",
        cover: "",
        name: "",
        code: "",
        category: "",
        description: "",
        creatorUserId: "",
        creatorTime: "",
        scope: "3",
        docsLearningLength: 1,
        homeworkId: "",
        homeExam: "",
        evaluation: "1",
        enabledMark: "10",
        courseChapterCount: 1,
        userCount: 1,
        userLearningCount: 1,
        userLearnedCount: 1,
      },
      activetnlqtg: "0",
      categoryProps: { children: "children", label: "fullName", value: "id" },
      scopeOptions: [
        { fullName: "全公司", id: "all" },
        { fullName: "仅创建人", id: "creator" },
        {
          fullName: "指定人员",
          id: "select",
        },
      ],
      evaluationOptions: [
        { fullName: "星评", id: "1" },
        { fullName: "评估表", id: "2" },
      ],
      preventionCheatOptions: [{ fullName: "开启", id: "1" }],
      lastModifyUserIdOptions: [{ fullName: "开启", id: "1" }],
      enabledMarkOptions: [
        { fullName: "未完成", id: 0 },
        { fullName: "已完成", id: 1 },
      ],
      query: {
        name: undefined,
        id: undefined,
      },
      homeworkList: [],
      examList: [],
      evaluationList: [],
      list: [],
      listLoading: true,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleTabClick(tab, event) {
      if (tab.name == "first") {
        this.initData();
      }
      if (tab.name == "second") {
        this.getStudyHomeworkDataList();
      }

      if (tab.name == "third") {
        this.getStudyExamDataList();
      }

      if (tab.name == "fourth") {
      }
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      _dataAll.docsLearning = parseInt(_dataAll.docsLearning);
      this.dataForm = _dataAll;
    },

    goBack() {
      this.$nextTick(() => {
        this.$emit("refresh");
      });
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.query.id = id;
      this.search();
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: "/api/course/TemsCourse/data/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataInfo(res.data);
            this.loading = false;
          });
        }
      });
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId,
      };
      request({
        url: `/api/course/TemsCourse/getStudyDataList`,
        method: "post",
        data: _query,
      }).then((res) => {
        this.list = res.data;
        this.listLoading = false;
      });
    },
    getStudyExamDataList() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        examId: this.query.id,
        keyword: this.query.name,
        menuId: this.menuId,
      };
      request({
        url: `/api/course/TemsCourse/getStudyExamDataList`,
        method: "post",
        data: _query,
      }).then((res) => {
        this.examList = res.data;
        this.listLoading = false;
      });
    },
    getStudyHomeworkDataList() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId,
      };
      request({
        url: `/api/course/TemsCourse/getStudyHomeworkDataList`,
        method: "post",
        data: _query,
      }).then((res) => {
        this.homeworkList = res.data;
        this.listLoading = false;
      });
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == "ascending" ? "asc" : "desc";
      this.listQuery.sidx = !order ? "" : prop;
      this.initData();
    },
  },
};
</script>
<style lang="scss">
.row-bg {
  padding: 16px 16px;
  background-color: #ffffff;
}

.page-container-content h5 {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  line-height: 25px/1;
  min-height: 25px;
  word-wrap: break-word;
  line-height: 25px;
  font-weight: 400;
  margin: 0;
}

.page-container-content .other-info {
  padding-top: 5px;
}

.page-container-content .other-info span {
  padding-right: 15px;
}

.page-container-content .conditions {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.page-container-content .conditions .label-box {
  display: flex;
  flex-wrap: wrap;
}

.page-container-content .conditions .label-box .label-item {
  margin-left: 10px;
  line-height: 21px;
}

.page-container-extraContent {
  min-width: 242px;
  /* text-align: right */
}

.page-container-extraContent .page-container-extra {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 30px;
  font-size: 20px;
}

.page-container-extraContent .page-container-extra .item {
  margin: 0 30px;
  text-algin: center !important;
  line-height: 30px;
}

.page-container-extraContent .page-container-extra .item .ant-statistic {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
}

.page-container-extraContent
  .page-container-extra
  .item[data-v-b280ca9a]
  .ant-statistic-title {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 25px;
}

.page-container-extraContent
  .page-container-extra
  .item[data-v-b280ca9a]
  .ant-statistic-content {
  font-size: 18px;
  line-height: 22px;
  height: 22px;
  margin-top: 6px;
  text-algin: center;
}

.page-container-extraContent
  .page-container-extra
  .item[data-v-b280ca9a]
  .ant-statistic-content-suffix {
  font-size: 14px;
  line-height: 20px;
  color: #666;
}

.page-container-content
  .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
}

.page-container-content
  .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner::after {
  color: #ffffff;
}

.page-container-content
  .el-checkbox__input.is-disabled
  + span.el-checkbox__label {
  color: #606266;
  cursor: not-allowed;
}
</style>
